<template>
  <div class="fillcontain">
    <div class="box">
      <h3>收费搜索</h3>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="车牌号：">
          <el-input v-model="search.phone" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="出库时间：">
          <el-date-picker
            v-model="outTime"
            type="datetime"
            placeholder="选择出库时间"
            default-time="12:00:00"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">查询搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box flex-between">
      <h3>收费记录</h3>
      <el-button size="small">刷新</el-button>
    </div>
    <div class="table_container box">
      <el-table :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column property="payNum" label="收费编号" width="100"></el-table-column>
        <el-table-column property="carNum" label="车牌号" width="120"></el-table-column>
        <el-table-column property="inTime" label="入库时间" width="200"></el-table-column>
        <el-table-column property="outTime" label="出库时间" width="200"></el-table-column>
        <el-table-column property="parkingTime" label="停车时长" width="120"></el-table-column>
        <el-table-column property="shouldPay" label="应缴费" width="100"></el-table-column>
        <el-table-column property="actualPay" label="实缴费" width="100"></el-table-column>
        <el-table-column property="payMethod" label="支付方式" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" plain>详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="count"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        phone: ""
      },
      inTime: "",
      outTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      tableData: [
        {
          payNum: "SFBH00001",
          carNum: "鄂AHK001",
          inTime: "2019-05-02 18:00:30",
          outTime: "2019-05-03 17:00:30",
          parkingTime: "23:00:00",
          shouldPay: 5.0,
          actualPay: 5.0,
          payMethod: "微信支付"
        },
        {
          payNum: "SFBH00002",
          carNum: "鄂AHK002",
          inTime: "2020-05-01 18:00:30",
          outTime: "2020-05-02 14:20:30",
          parkingTime: "20:20:00",
          shouldPay: 5.0,
          actualPay: 0.0,
          payMethod: "月卡"
        },
        {
          payNum: "SFBH00001",
          carNum: "鄂AHK001",
          inTime: "2019-05-02 18:00:30",
          outTime: "2019-05-03 17:00:30",
          parkingTime: "23:00:00",
          shouldPay: 5.0,
          actualPay: 5.0,
          payMethod: "微信支付"
        },
        {
          payNum: "SFBH00002",
          carNum: "鄂AHK002",
          inTime: "2020-05-01 18:00:30",
          outTime: "2020-05-02 14:20:30",
          parkingTime: "20:20:00",
          shouldPay: 5.0,
          actualPay: 0.0,
          payMethod: "月卡"
        },
        {
          payNum: "SFBH00001",
          carNum: "鄂AHK001",
          inTime: "2019-05-02 18:00:30",
          outTime: "2019-05-03 17:00:30",
          parkingTime: "23:00:00",
          shouldPay: 5.0,
          actualPay: 5.0,
          payMethod: "微信支付"
        },
        {
          payNum: "SFBH00002",
          carNum: "鄂AHK002",
          inTime: "2020-05-01 18:00:30",
          outTime: "2020-05-02 14:20:30",
          parkingTime: "20:20:00",
          shouldPay: 5.0,
          actualPay: 0.0,
          payMethod: "月卡"
        },
        {
          payNum: "SFBH00001",
          carNum: "鄂AHK001",
          inTime: "2019-05-02 18:00:30",
          outTime: "2019-05-03 17:00:30",
          parkingTime: "23:00:00",
          shouldPay: 5.0,
          actualPay: 5.0,
          payMethod: "微信支付"
        },
        {
          payNum: "SFBH00002",
          carNum: "鄂AHK002",
          inTime: "2020-05-01 18:00:30",
          outTime: "2020-05-02 14:20:30",
          parkingTime: "20:20:00",
          shouldPay: 5.0,
          actualPay: 0.0,
          payMethod: "月卡"
        },
        {
          payNum: "SFBH00001",
          carNum: "鄂AHK001",
          inTime: "2019-05-02 18:00:30",
          outTime: "2019-05-03 17:00:30",
          parkingTime: "23:00:00",
          shouldPay: 5.0,
          actualPay: 5.0,
          payMethod: "微信支付"
        },
        {
          payNum: "SFBH00002",
          carNum: "鄂AHK002",
          inTime: "2020-05-01 18:00:30",
          outTime: "2020-05-02 14:20:30",
          parkingTime: "20:20:00",
          shouldPay: 5.0,
          actualPay: 0.0,
          payMethod: "月卡"
        }
      ],
      currentRow: 10,
      offset: 0,
      limit: 10,
      count: 0,
      currentPage: 1
    };
  },
  components: {},
  created() {
    // this.initData();
  },
  methods: {
    // async initData(){
    //     try{
    //         const countData = await getUserCount();
    //         if (countData.status == 1) {
    //             this.count = countData.count;
    //         }else{
    //             throw new Error('获取数据失败');
    //         }
    //         this.getUsers();
    //     }catch(err){
    //         console.log('获取数据失败', err);
    //     }
    // },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      // this.getUsers()
    }
    // async getUsers(){
    //     const Users = await getUserList({offset: this.offset, limit: this.limit});
    //     this.tableData = [];
    //     Users.forEach(item => {
    //         const tableData = {};
    //         tableData.username = item.username;
    //         tableData.registe_time = item.registe_time;
    //         tableData.city = item.city;
    //         this.tableData.push(tableData);
    //     })
    // }
  }
};
</script>

<style lang="less">
// @import url("../style/mixin.less");
@import url("../style/main.less");
.table_container {
  padding: 20px;
}
.box {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  .el-form-item {
    margin: 20px 20px 0 0;
  }
}
</style>
